<template>
  <div class="register-wrapper">
    <el-form
      label-width="100px"
      :model="registerForm"
      ref="registerForm"
      label-position="right"
      :rules="rules"
    >
      <el-form-item label="邮箱：" prop="email">
        <el-input
          v-model="registerForm.email"
          placeholder="请输入邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户名：" prop="username">
        <el-input
          v-model="registerForm.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input
          v-model="registerForm.password"
          placeholder="请输入密码"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="checkPassword">
        <el-input
          v-model="registerForm.checkPassword"
          placeholder="请输入确认密码"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <div class="captcha-box">
          <el-input
            v-model="registerForm.captcha"
            placeholder="请输入验证码"
          ></el-input>
          <img  class="captcha-img" @click="reflectCaptcha" :src="captchaImgUrl" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { RegisterFormType } from "~/type/user";
import {
  username,
  email,
  password,
  captcha,
  validatePass,
  validateCheckPass,
} from "~/rules/userRules";
import { Form } from "element-ui"; 
import md5 from "MD5"; 

@Component
export default class Register extends Vue {
  registerForm: RegisterFormType = {
    username: "ceshi",
    password: "1234",
    checkPassword: "1234",
    email: "2921855939@qq.com",
    captcha: "1234",
  };

  rules = {
    username,
    email,
    password: [
      password,
      {
        validator: validatePass(this.registerForm, this.$refs, "registerForm"),
        trigger: "blur",
      },
    ],
    captcha,
    checkPassword: [
      password,
      { validator: validateCheckPass(this.registerForm), trigger: "blur" },
    ],
  };

  onSubmit() {
    let registerFormRef = this.$refs.registerForm as Form;
    registerFormRef.validate((valid) => {
      if (valid) {
        // 请求register
        let { password, username, email, captcha } = this.registerForm;
        let obj = {
          password: md5(password),
          username,
          email,
          captcha,
        };
        this.$http.post("/user/register", obj).then((data: any) => {  
          if (data.code === 0) {
            // 注册成功
            this.$alert("注册成功, 跳转到登录页", {
              confirmButtonText: "确定",
              callback: () => {
                this.$router.push("/login");
              },
            });
          } else {
            // 注册失败
            this.$message.error(data.message);
          }
        });
      } else {
        this.$message.error("校验失败，请重试！！！");
      }
    });
  }


  // 验证码
  captchaImgUrl: string = "/api/captcha";
  reflectCaptcha() {
    this.captchaImgUrl = "/api/captcha?id=" + Math.random();
  }
}
</script>

<style lang="scss" scope>
.register-wrapper {
  width: 500px;
  margin: 200px auto;

  .captcha-box {
    display: flex;
    justify-content: space-between;

    .captcha-img{
      min-width: 100px;
    }
  }
}
</style>
